import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    Dimensions,
    StyleSheet,
    ScrollView,
    Animated,
    RefreshControl
} from 'react-native';

import Constant from "../Contant";
import {observer} from "mobx-react";
import {observable} from 'mobx'
import {Star} from '../home/Home'


const UserInfo = ()=>{
    return <View  style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between'}}>
        <View style={{flexDirection:'row',alignItems:'center'}}>
            <View style={{padding:10}}>
                <Image source={require('../../asserts/me/me_icon_bucket.png')}/>
            </View>
            <View>
                <Text>林小小</Text>
                <Star/>
            </View>
        </View>
        <Text style={{fontSize:12,color:Constant.TEXT_COLOR_6}}>2016-03-07</Text>
    </View>
}

const Content = ()=>{
    return <View>
        <Text style={{color:Constant.TEXT_COLOR_6}}>比较好的途径是，将这个异步 action 触发的 observer 塞入到队列中，每当遇到 await 就执行并清空队列，同时还可以支持 timeout 设定，比如设置为 100ms 时，如果 fetch 函数在 100ms 内执行完毕，就不会执行之前的队列，达到肉眼无法识别的间隔内不触发 loading 的效果

            作者：黄子毅
            链接：http://www.jianshu.com/p/663ed2dec84e
            來源：简书
            著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</Text>
    </View>
}

const MerchantContent = ()=>{
    return <View>
        <View style={{paddingLeft:40}}>
            <Image source={require('../../asserts/home/triangle.png')}/>
        </View>
        <View style={{backgroundColor:'#f1f1f3',padding:10}}>
            <Text style={{color:Constant.TEXT_COLOR_6}}>
                商家回复：谢谢您的好评，特别好，我们会不断进步以越来越来的优质服务来接待您。
            </Text>
        </View>
    </View>
}

const PictureCom = ({pictures=[1,2,3,4,5,6,7,8]})=>{
    let rows = [] ;
    for (let index in pictures){
        if(index%4===0){
            let row = (<View style={styles.row}>
                <View  style={styles.item}>
                    <Image style={{width:'100%',height:60}} source={{uri:'http://facebook.github.io/react/img/logo_og.png'}}/>
                </View>
                <View  style={styles.item}>
                    <Image style={{width:'100%',height:60}} source={{uri:'http://facebook.github.io/react/img/logo_og.png'}}/>
                </View>
                <View  style={styles.item}>
                    <Image style={{width:'100%',height:60}} source={{uri:'http://facebook.github.io/react/img/logo_og.png'}}/>
                </View>
                <View  style={styles.item}>
                    <Image style={{width:'100%',height:60}} source={{uri:'http://facebook.github.io/react/img/logo_og.png'}}/>
                </View>
            </View>)
            rows.push(row);
        }
    }
    return <View style={{paddingVertical:10}}>
        {rows}
    </View>
}

const JudgeCell  = ()=>{
    return <View style={[{padding:10,backgroundColor:'#fff'},styles.borderBottom]}>
        <UserInfo/>
        <Content/>
        <MerchantContent/>
        <PictureCom/>
    </View>
}

const Header = ()=>{
    return <View style={{flexDirection:'row',alignItems:'center',paddingHorizontal:10,paddingVertical:5,backgroundColor:'#fff'}}>
        <View>
            <Text>全部</Text>
        </View>
        <View style={{paddingHorizontal:15}}>
            <Text>(121)</Text>
        </View>
        <Star/>
        <Text>4.0</Text>
    </View>
}

export default class ProductJudge extends Component{
    render(){
        return <ScrollView style={{flex:1,backgroundColor:Constant.GRAYBGCOLOR}}>
            <Header/>
            <JudgeCell/>
            <JudgeCell/>
            <JudgeCell/>
        </ScrollView>
    }
}

const styles = {
    borderBottom: {
        borderBottomColor: Constant.SEPLINECOLOR,
        borderBottomWidth: StyleSheet.hairlineWidth
    },
    row:{
        flexDirection:'row',
        flex:1,
    },
    item:{
        borderWidth:StyleSheet.hairlineWidth,
        borderColor:Constant.SEPLINECOLOR,
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    }
}